<template>
	<el-main class="bg">
		<el-form ref="form" :model="form" status-icon label-width="120px" v-if="is_view()">
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'event_name') || $check_field('add', 'event_name') || $check_field('set', 'event_name')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="赛事名称" prop="event_name">
					<el-input id="event_name" v-model="form['event_name']" placeholder="请输入赛事名称"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'event_name')) || (!form['event_application_id'] && $check_field('add', 'event_name'))"
						:disabled="disabledObj['event_name_isDisabled']"></el-input>
					<div v-else-if="$check_field('get', 'event_name')">{{ form['event_name'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'event_type') || $check_field('add', 'event_type') || $check_field('set', 'event_type')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="赛事类型" prop="event_type">
					<el-select id="event_type" v-model="form['event_type']"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'event_type')) || (!form['event_application_id'] && $check_field('add', 'event_type'))">
						<el-option v-for="o in list_event_type" :key="o" :label="o" :value="o">
						</el-option>
					</el-select>
					<div v-else-if="$check_field('get', 'event_type')">{{ form['event_type'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'event_number') || $check_field('add', 'event_number') || $check_field('set', 'event_number')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="赛事编号" prop="event_number">
					<el-input id="event_number" v-model="form['event_number']" placeholder="请输入赛事编号"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'event_number')) || (!form['event_application_id'] && $check_field('add', 'event_number'))"
						:disabled="disabledObj['event_number_isDisabled']"></el-input>
					<div v-else-if="$check_field('get', 'event_number')">{{ form['event_number'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'group_competition_unit') || $check_field('add', 'group_competition_unit') || $check_field('set', 'group_competition_unit')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="组赛单位" prop="group_competition_unit">
					<el-select id="group_competition_unit" v-model="form['group_competition_unit']" placeholder="请选择组赛单位"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'group_competition_unit')) || (!form['event_application_id'] && $check_field('add', 'group_competition_unit'))"
						:disabled="disabledObj['group_competition_unit_isDisabled']" @change="fillLeaderAndContact">
						<el-option v-for="unit in groupCompetitionUnits" :key="unit" :label="unit" :value="unit"></el-option>
					</el-select>
					<div v-else-if="$check_field('get', 'group_competition_unit')">{{ form['group_competition_unit'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'project_leader') || $check_field('add', 'project_leader') || $check_field('set', 'project_leader')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="项目负责人" prop="project_leader">
					<el-input id="project_leader" v-model="form['project_leader']" placeholder="请输入项目负责人"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'project_leader')) || (!form['event_application_id'] && $check_field('add', 'project_leader'))"
						:disabled="disabledObj['project_leader_isDisabled']"></el-input>
					<div v-else-if="$check_field('get', 'project_leader')">{{ form['project_leader'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'contact_number') || $check_field('add', 'contact_number') || $check_field('set', 'contact_number')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="联系电话" prop="contact_number">
					<el-input id="contact_number" v-model="form['contact_number']" placeholder="请输入联系电话" type="tel"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'contact_number')) || (!form['event_application_id'] && $check_field('add', 'contact_number'))"></el-input>
					<div v-else-if="$check_field('get', 'contact_number')">{{ form['contact_number'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'start_date') || $check_field('add', 'start_date') || $check_field('set', 'start_date')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="开始日期" prop="start_date">
					<el-date-picker :disabled="disabledObj['start_date_isDisabled']"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'start_date')) || (!form['event_application_id'] && $check_field('add', 'start_date'))"
						id="start_date" v-model="form['start_date']" type="date" placeholder="选择日期">
					</el-date-picker>
					<div v-else-if="$check_field('get', 'start_date')">{{ form['start_date'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'end_date') || $check_field('add', 'end_date') || $check_field('set', 'end_date')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="结束日期" prop="end_date">
					<el-date-picker :disabled="disabledObj['end_date_isDisabled']"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'end_date')) || (!form['event_application_id'] && $check_field('add', 'end_date'))"
						id="end_date" v-model="form['end_date']" type="date" placeholder="选择日期">
					</el-date-picker>
					<div v-else-if="$check_field('get', 'end_date')">{{ form['end_date'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'organizer') || $check_field('add', 'organizer') || $check_field('set', 'organizer')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="主办单位" prop="organizer">
					<!-- 将 el-input 替换为 el-select 实现下拉框 -->
					<el-select id="organizer" v-model="form['organizer']" placeholder="请选择主办单位"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'organizer')) || (!form['event_application_id'] && $check_field('add', 'organizer'))"
						:disabled="disabledObj['organizer_isDisabled']">
						<!-- 遍历 universityOrganizerList 生成下拉选项 -->
						<el-option v-for="organizer in universityOrganizerList" :key="organizer" :label="organizer"
							:value="organizer"></el-option>
					</el-select>
					<div v-else-if="$check_field('get', 'organizer')">{{ form['organizer'] }}</div>
				</el-form-item>
			</el-col>
			<el-col
				v-if="user_group === '管理员' || $check_field('get', 'group_significance') || $check_field('add', 'group_significance') || $check_field('set', 'group_significance')"
				:xs="24" :sm="12" :lg="8">
				<el-form-item label="组赛意义" prop="group_significance">
					<el-input id="group_significance" v-model="form['group_significance']" placeholder="请输入组赛意义"
						v-if="user_group === '管理员' || (form['event_application_id'] && $check_field('set', 'group_significance')) || (!form['event_application_id'] && $check_field('add', 'group_significance'))"
						:disabled="disabledObj['group_significance_isDisabled']"></el-input>
					<div v-else-if="$check_field('get', 'group_significance')">{{ form['group_significance'] }}</div>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :lg="8">
				<el-form-item label="审核状态" prop="examine_state">
					<el-select id="examine_state" v-model="form['examine_state']"
						v-if="user_group === '管理员' || (form['examine_state'] && $check_examine()) || (!form['examine_state'] && $check_examine())">
						<el-option key="未审核" label="未审核" value="未审核"></el-option>
						<el-option key="已通过" label="已通过" value="已通过"></el-option>
						<el-option key="未通过" label="未通过" value="未通过"></el-option>
					</el-select>
					<div v-else-if="$check_field('get', 'examine_state')">{{ form["examine_state"] }}</div>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :lg="8">
				<el-form-item>
					<el-button type="primary" @click="submit()">提交</el-button>
					<el-button @click="cancel()">取消</el-button>
				</el-form-item>
			</el-col>

		</el-form>
	</el-main>
</template>

<script>
import mixin from "@/mixins/page.js";

export default {
	mixins: [mixin],
	data() {
		return {
			universityOrganizerList: [
				// 学校行政部门
				"学校教务处",
				"学校学生处",
				"学校团委",
				"学校体育部",
				"学校科研处",
				"学校国际交流处",
				"学校工会",

				// 学院层面
				"计算机学院",
				"机械工程学院",
				"电子信息学院",
				"经济管理学院",
				"外国语学院",
				"艺术设计学院",
				"生命科学学院",

				// 学生社团组织
				"篮球社团",
				"足球社团",
				"羽毛球社团",
				"乒乓球社团",
				"游泳协会",
				"武术协会",
				"健身俱乐部",
				"棋类社团",

				// 学术组织
				"数学建模协会",
				"科技创新协会",
				"哲学思辨社",
				"历史文化研究社",

				// 特殊机构
				"校学生会",
				"研究生会",
				"校友总会",
				"校图书馆",
				"校博物馆"
			],
			// 新增数据映射
			groupCompetitionUnitMap: {
				"学校体育部": {
					projectLeader: "李老师",
					contactNumber: "13812345678"
				},
				"篮球社团": {
					projectLeader: "张同学",
					contactNumber: "13923456789"
				},
				"计算机学院": {
					projectLeader: "王教授",
					contactNumber: "13734567890"
				},
				"足球社团": {
					projectLeader: "赵同学",
					contactNumber: "13645678901"
				},
				"羽毛球社团": {
					projectLeader: "孙同学",
					contactNumber: "13556789012"
				},
				"乒乓球社团": {
					projectLeader: "刘同学",
					contactNumber: "13467890123"
				},
				"游泳协会": {
					projectLeader: "陈教练",
					contactNumber: "13378901234"
				},
				"武术协会": {
					projectLeader: "杨师傅",
					contactNumber: "13289012345"
				},
				"排球社团": {
					projectLeader: "吴同学",
					contactNumber: "13190123456"
				}
			},
			// 组赛单位列表，包含更多社团信息
			groupCompetitionUnits: [
				"学校体育部",
				"篮球社团",
				"计算机学院",
				"足球社团",
				"羽毛球社团",
				"乒乓球社团",
				"游泳协会",
				"武术协会",
				"排球社团"
			],
			field: "event_application_id",
			url_add: "~/api/event_application/add?",
			url_set: "~/api/event_application/set?",
			url_get_obj: "~/api/event_application/get_obj?",
			url_upload: "~/api/event_application/upload?",

			query: {
				"event_application_id": 0,
			},

			form: {
				"event_name": '', // 赛事名称
				"event_type": '', // 赛事类型
				"event_number": '', // 赛事编号
				"group_competition_unit": '', // 组赛单位
				"project_leader": '', // 项目负责人
				"contact_number": '', // 联系电话
				"start_date": '', // 开始日期
				"end_date": '', // 结束日期
				"organizer": '', // 主办单位
				"group_significance": '', // 组赛意义
				"examine_state": "未审核",
				"event_application_id": 0, // ID

			},
			disabledObj: {
				"event_name_isDisabled": false,
				"event_type_isDisabled": false,
				"event_number_isDisabled": false,
				"group_competition_unit_isDisabled": false,
				"project_leader_isDisabled": false,
				"contact_number_isDisabled": false,
				"start_date_isDisabled": false,
				"end_date_isDisabled": false,
				"organizer_isDisabled": false,
				"group_significance_isDisabled": false,
			},
			//赛事类型选项列表
			list_event_type: ['团队赛', '个人赛'],

		}
	},
	methods: {
		fillLeaderAndContact() {
			const selectedUnit = this.form['group_competition_unit'];
			const unitInfo = this.groupCompetitionUnitMap[selectedUnit];
			if (unitInfo) {
				this.form['project_leader'] = unitInfo.projectLeader;
				this.form['contact_number'] = unitInfo.contactNumber;
			} else {
				this.form['project_leader'] = '';
				this.form['contact_number'] = '';
			}
		},

		/**
		 * 获取对象之前
		 * @param {Object} param
		 */
		get_obj_before(param) {
			var form = "";
			if (this.form && form) {
				Object.keys(this.form).forEach(key => {
					Object.keys(form).forEach(dbKey => {
						// if(dbKey === "charging_standard"){
						// 	this.form['charging_rules'] = form[dbKey];
						// 	this.disabledObj['charging_rules_isDisabled'] = true;
						// };
						if (key === dbKey) {
							this.disabledObj[key + '_isDisabled'] = true;
						}
					})
				})
			}
			this.form["start_date"] = this.$toTime(parseInt(this.form["start_date"]), "yyyy-MM-dd")
			this.form["end_date"] = this.$toTime(parseInt(this.form["end_date"]), "yyyy-MM-dd")
			$.db.del("form");
			return param;
		},

		/**
		 * 获取对象之后
		 * @param {Object} json
		 * @param {Object} func
		 */
		get_obj_after(json, func) {
			if (parseInt(this.form["start_date"]) > 9999) {
				this.form["start_date"] = this.$toTime(parseInt(this.form["start_date"]), "yyyy-MM-dd")
			}
			if (parseInt(this.form["end_date"]) > 9999) {
				this.form["end_date"] = this.$toTime(parseInt(this.form["end_date"]), "yyyy-MM-dd")
			}

		},

		is_view() {
			var bl = this.user_group == "管理员";

			if (!bl) {
				bl = this.$check_action('/event_application/table', 'add');
				console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
			}
			if (!bl) {
				bl = this.$check_action('/event_application/table', 'set');
				console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
			}
			if (!bl) {
				bl = this.$check_action('/event_application/view', 'add');
				console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
			}
			if (!bl) {
				bl = this.$check_action('/event_application/view', 'set');
				console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
			}
			if (!bl) {
				bl = this.$check_action('/event_application/view', 'get');
				console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
			}

			console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");

			return bl;
		},
		/**
		 * 上传文件
		 * @param {Object} param
		 */
		uploadimg(param) {
			this.uploadFile(param.file, "avatar");
		},

	},
	created() {
	}
}
</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
